<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表白墙</title>
</head>
<body>
<style>
        .container {
            width: 400px;
            margin: 0 auto;
        }
        h1 {
            padding: 10px;
            width: 200px;
            margin: 0 auto;
        }
        p {
            margin: 10px auto;
            color: gray;
        }
        .row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 2px 0;
            width: 300px;
        }
        div > input {
            height: 30px;
            width: 200px;
        }
        button {
            margin: 0 auto;
            height: 40px;
            width: 300px;
            background-color: orange;
            border: none;
            color: white;
        }
        button:active {
            background-color: rgb(251, 209, 130);
        }
    </style>
<div class="container">
    <h1>表白墙</h1>
    <p>输入后点击提交，就会把信息显示在表格中</p>
    <div class="row">
        <span>谁:</span>
        <input type="text">
    </div>
    <div class="row">
        <span>对谁:</span>
        <input type="text">
    </div>
    <div class="row">
        <span>说:</span>
        <input type="text">
    </div>
    <div class="row">
        <button>提交</button>
    </div>
</div>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
        let container = document.querySelector('.container');
        let button = document.querySelector('button');
        button.onclick = function() {
            //1.获取输入框内容
            let inputs = document.querySelectorAll('input');
            let from = inputs[0].value;
            let to = inputs[1].value;
            let message = inputs[2].value;
            if(from == '' || to == '' || message == '') {
                alert('当前输入框内容为空!');
                return;
            }
            console.log(from + ", " + to + ", " + message);
            //2.构造出新的div，保存用户提交信息
            let rowDiv = document.createElement('div');
            rowDiv.className = 'row';
            rowDiv.innerHTML = from + " 对 " + to + " 说: " + message;
            container.appendChild(rowDiv);
            //3.提交后，清空输入框
            for(let i = 0; i < inputs.length; i++) {
                inputs[i].value = '';
            }
            let data = {
                from,
                to,
                message
            }
            //4.向服务器提交请求
            $.ajax({
                type: 'post',
                url: 'message',
                //data中存放body内容将数据转换成json格式
                data: JSON.stringify(data),
                contentType: 'application/json; charset=utf8',
                success: function() {
                    console.log('提交成功!');
                }
            });
        }
        //获取服务器数据
        function getMessages() {
            $.ajax({
                type: 'get',
                url: 'message',
                success: function(body) {
                    let container = document.querySelector('.container');
                    for(let i = 0; i < body.length; i++) {
                        let message = body[i];
                        let div = document.createElement('div');
                        div.className = 'row';
                        div.innerHTML = message.from + ' 对 ' + message.to + ' 说: ' + message.message;
                        container.appendChild(div);
                    }
                }
            });
        }
        getMessages();
    </script>
</body>
</html>